<template>
    <div class="container-box-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="integralStatistics mb-4">
                    <div class="mainBackgroundColor border-radius8 overflowHidden">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">
                            积分数据统计
                        </div>
                        <div style="padding: 28px 0" class="width-25 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分发放总数&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.incomeTotal ? total.incomeTotal : 0}}</p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-25 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分发放次数&nbsp;</p>
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.incomeCount ? total.incomeCount : 0}} <span class="fontSize12">次</span></p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-25 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分消耗总数&nbsp;</p>
                                    <p class="fontSize30  fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.expendTotal ? total.expendTotal : 0}}</p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-25 floatLeft">
                            <div class="flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分消耗次数&nbsp;</p>
                                    <!-- <img src="./assets/question_logo.jpg" style="margin-top: -4px;"> -->
                                    <p class="fontSize30 fontWeightBold" style="margin: 12px 0 0 0;color:#DDB15C;text-align:center">{{total.expendCount ? total.expendCount : 0}}  <span class="fontSize12">次</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="integralStatistics">
                    <div class="mainBackgroundColor rounded-t-lg">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">积分发放统计
                            <el-date-picker
                                    v-model="time"
                                    type="datetimerange"
                                    size="mini"
                                    class="floatRight"
                                    @change="changeTime"
                                    :picker-options="pickerOptions"
                                    style="margin-top: 14px"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart1" style="height: 320px;"></div>
                        </div>
                    </div>
                </div>
                <div class="integralStatistics">
                    <div class="mainBackgroundColor rounded-b-lg">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">积分消耗统计</div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart2" style="height: 320px;"></div>
                        </div>
                    </div>
                </div>                
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import {pointList ,pointConsumeList,pointAct} from "./api.js";
    export default {
        name: "IntegralStatistics",
        data(){
            return{
                time:"",
                time1:"",
                pickerOptions:{},
                charts_data: {
                    dates: [],         // x轴，日期
                    parkList: [],    // y轴，停车费缴费
                    propertyList: [],        // y轴，物业费缴费
                    otherList: [],        // y轴，其他费用缴费
                    shopList: [],        // y轴，商城消费
                },
                charts_options: {},

                charts_data2:{
                    productkDates:[],   //X轴，日期
                    productList:[],     //Y轴 产品库消耗
                    offlineList:[],  //Y轴 线下商家
                },
                charts_options2: {},
                myCharts : '',
                myCharts2 : '',
                total:{},
            }
        },
        computed:{

        },
        mounted(){
            this.showInitChart1();
            this.showInitChart2();
            // 积分数据统计方法
            this.pointAct()
            this. pickerOptions = {
                onPick: ({ maxDate, minDate }) => {
                    this.cuttentTime = minDate.getTime();
                    if (maxDate) {
                        this.cuttentTime = "";
                    }
                },
                    disabledDate: (time) => {
                    if (time.getTime() > Date.now()) {
                        return true;
                    }
                    }
                //     if (this.cuttentTime != "") {
                //         const one = 30 * 24 * 3600 * 1000;
                //         const minTime = this.cuttentTime - one;
                //         const maxTime = this.cuttentTime + one;
                //         return time.getTime() < minTime || time.getTime() > maxTime;   //选择日期范围为一个月
                //     }
                // },
            }
        },
        methods:{
            pointAct(startTime,endTime) {
                pointAct({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                    if(response.success){
                        this.total = response.data;
                    }
                })
            },
            changeTime(data){
                let startTime='' ; let endTime = ''
                 if(data&&data.length>0){
                    startTime = data[0];
                    endTime = data[1];
                 }else if(data=null){
                    startTime = ''
                    endTime = ''
                 }
                this.showInitChart1(startTime,endTime);
                this.showInitChart2(startTime,endTime);
            },
            showInitChart1(startTime,endTime){
                // 积分发放统计折线图
                // Promise.all([pointList({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""})]).then(res=>{
                pointList({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(res=>{
                    if(res.success==true){
                        this.charts_data = {
                            dates:res.data.dates || [],
                            parkList:res.data.parkingFee || [],
                            propertyList:res.data.propertyFee || [],
                            otherList:res.data.otherFee || [],
                            shopList:res.data.mallFee || []
                        }
                    }
                    setTimeout(()=>{
                        this.initChart1(res);
                    },100)
                    
                }).catch(()=>{
                });
                this.initChart1([]);
            },

            showInitChart2(startTime,endTime){
                // 积分消耗折线图
                // Promise.all([pointConsumeList(startTime,endTime)]).then(res=>{
               pointConsumeList({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(res=>{
                    if(res.success==true){
                        console.log('res',res);
                        this.charts_data2={
                            productkDates:res.data.dates || [],
                            productList:res.data.productLibrary || [],
                            offlineList:res.data.merchant || [],
                        }
                    }
                    setTimeout(()=>{
                        this.initChart2(res);
                    },100)
                }).catch(()=>{
                });

                this.initChart2([]);
            },

            initChart1(data){
                let dom = document.getElementById("chart1");
                this.myCharts = echarts.init(dom);
                this.setLineChart(this.myCharts,data);
            },

            initChart2(data){
                let dom = document.getElementById("chart2");
                this.myCharts = echarts.init(dom);
                this.setlineChart2(this.myCharts,data);
            },
            
           setLineChart(myCharts,data){
                myCharts.clear();
                    this.charts_options = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                type: 'shadow',
                                
                                },
                                borderWidth: 4
                            },
                            legend: {
                                data: ['停车费缴费', '物业费缴费', '其他费用缴费', '商城消费'],
                                textStyle: {
                                color: '#606266',
                                fontWeight: '400'
                            }
                            },
                            grid: {
                                show:false,
                                left: '5%',
                                top: '20%',
                                bottom: '10%',
                                containLabel: true
                            },
                            xAxis: {
                                data:this.charts_data['dates'],
                                // data: ['5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21','5-22','5-23','5-24','5-25','5-26','5-27','5-28'],
                                type: 'category',
                                boundaryGap: true,
                                textStyle: {
                                    color: '#6E6E6D',
                                    fontWeight: 400,
                                    fontFamily: 'Noto Sans SC'
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#414448'
                                    }
                                },
                            },
                            yAxis: {
                                type: 'value',
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#F2F3F5'
                                    }
                                },
                                 axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#414448',
                                    }
                                },
                            },
                            series: [
                                {
                                // data: [150, 132, 1300, 134, 90, 230, 500],
                                data: this.charts_data['parkList'],
                                name: '停车费缴费',
                                type: 'line',
                                // stack: 'Total',
                                symbolSize: 6,
                                itemStyle: {
                                    color: '#6F8EC6',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(153, 189, 254, 0.12)'},
                                            {offset: 1, color: 'rgba(153, 189, 254, 0.0001)'},
                                        ]
                                    }
                                },
                                smooth: true,
                                },
                                {
                                // data: [220, 182, 191, 1400, 290, 330, 310,600,700,800,900,1000,1200,700],
                                data: this.charts_data['propertyList'],
                                name: '物业费缴费',
                                type: 'line',
                                // stack: 'Total',
                                symbolSize: 6,
                                itemStyle: {
                                    color: '#65A9A5',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(101, 169, 165, 0.12)'},
                                            {offset: 1, color: 'rgba(101, 169, 165, 0.0001)'},
                                        ]
                                    }
                                },
                                smooth: true,
                                },
                                {
                                // data: [150, 232, 201, 154, 190, 330, 410,800,600,500,400,300],
                                data: this.charts_data['otherList'],
                                name: '其他费用缴费',
                                type: 'line',
                                // stack: 'Total',
                                itemStyle: {
                                    color: '#EE7171',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(238, 113, 113, 0.12)'},
                                            {offset: 1, color: 'rgba(238, 113, 113, 0.0001)'},
                                        ]
                                    }
                                },
                                smooth: true,
                                },
                                {
                                // data: [320, 332, 301, 334, 390, 330, 320,700,500,400,300,200],
                                data: this.charts_data['shopList'],
                                name: '商城消费',
                                type: 'line',
                                // stack: 'Total',
                                 itemStyle: {
                                    color: '#DDB15C',
                                },
                                areaStyle:{
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {offset: 0, color: 'rgba(255, 211, 100, 0.12)'},
                                            {offset: 1, color: 'rgba(255, 235, 52, 0.0001)'},
                                        ]
                                    }
                                },
                                smooth: true,
                                },
                            ]
                        }
                    myCharts.setOption(this.charts_options);
                    this.myCharts = myCharts;
                //}
           },
          setlineChart2(myCharts,data){
            myCharts.clear();
            this.charts_options2 = {
                tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                            type: 'shadow',
                            
                            },
                            borderWidth: 4
                    },
                    legend: {
                        data: ['产品库消耗', '线下商家消耗'],
                        textStyle: {
                        color: '#606266',
                        fontWeight: '400'
                    }
                    },
                    grid: {
                        show:false,
                        left: '5%',
                        top: '20%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        data:this.charts_data2['productkDates'],
                        // data: ['5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21','5-22','5-23','5-24','5-25','5-26','5-27','5-28'],
                        type: 'category',
                        boundaryGap: true,
                        textStyle: {
                            color: '#6E6E6D',
                            fontWeight: 400,
                            fontFamily: 'Noto Sans SC'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#414448'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#F2F3F5'
                            }
                        },
                            axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#414448',
                            }
                        },
                    },
                    series: [
                        {
                        // data: [150, 132, 1300, 134, 90, 230, 500],
                        data: this.charts_data2['productList'],
                        name: '产品库消耗',
                        type: 'line',
                        // stack: 'Total',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#6F8EC6',
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(153, 189, 254, 0.12)'},
                                    {offset: 1, color: 'rgba(153, 189, 254, 0.0001)'},
                                ]
                            }
                        },
                        smooth: true,
                        },
                        {
                        // data: [220, 182, 191, 1400, 290, 330, 310,600,700,800,900,1000,1200,700],
                        data: this.charts_data2['offlineList'],
                        name: '线下商家消耗',
                        type: 'line',
                        // stack: 'Total',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#DDB15C',
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {offset: 0, color: 'rgba(255, 211, 100, 0.12)'},
                                    {offset: 1, color: 'rgba(255, 235, 52, 0.0001)'},
                                ]
                            }
                        },
                        smooth: true,
                        },
                    ]
            }
            myCharts.setOption(this.charts_options2);
            this.myCharts2 = myCharts;
          }
 
        }
    }
</script>

<style lang="scss">
    .integralStatistics{
        .title{
            height: 54px;line-height: 54px;padding: 0 9px 0 24px
        }
    }

    @media screen and (max-width: 1500px) {
        .el-col-8{
            width: 100% !important;
        }
        .el-col-16{
            width: 100% !important;
        }
    }

</style>